<template>
  <div class="mine">
    <div>
      <van-nav-bar title="我的" fixed>
        <template #right>
          <img
            src="~assets/image/mine_qd.png"
            width="20"
            height="20"
            alt=""
            @click="navbarRight"
          />
        </template>
      </van-nav-bar>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="mine-main">
        <div class="mine-item1">
          <div class="mime-img">
            <div class="mine-top">
              <van-image round width="74" height="74" lazy-load :src="img" />
              <div>
                <p class="nameGrade">
                  <span class="mine-name" @click="getUserInfo">{{
                    userInfo.fullname
                  }}</span>
                  <span class="mine-grade">{{ userInfo.gradeName }}</span>
                </p>
                <p>
                  <img
                    width="9"
                    height="11"
                    src="../assets/image/mine_phone.png"
                  />
                  <span class="tvPhone">{{ getPhone }}</span>
                </p>
              </div>
            </div>

            <img
              width="9"
              height="15"
              lazy-load
              @click="getUserinfo"
              src="../assets/image/arr_rigth.png"
            />
          </div>
          <div class="mine-money">
            <div class="mine-tvcenter" @click="getMoney">
              <p class="mine-tvmoeny">
                <span>{{ moeny }}</span
                >{{ yuan1 }}
              </p>
              <p>我的收益</p>
            </div>
            <div class="xian"></div>
            <div class="mine-tvcenter" @click="getProfit">
              <p class="mine-tvmoeny">
                <span>{{ todayMoeny }}</span
                >{{ yuan2 }}
              </p>
              <p>今日收益</p>
            </div>
            <div class="xian"></div>
            <div class="mine-tvcenter" @click="getProfit">
              <p class="mine-tvmoeny">
                <span>{{ yesterdayMoeny }}</span
                >{{ yuan2 }}
              </p>
              <p>昨日收益</p>
            </div>
          </div>
        </div>
        <hr />
        <div
          v-for="(item, index) in ItemData1"
          :key="'a' + index"
          class="mineItem"
          @click="getItemData1Click(index)"
        >
          <img :src="item.icon" width="20" height="20" alt="" />
          <span>{{ item.text }}</span>
          <img :src="item.iconRigth" width="9" height="15" alt="" />
        </div>
        <hr />
        <div
          v-for="(item, index1) in ItemData2"
          :key="'b' + index1"
          class="mineItem"
          @click="getItemData2Click(index1)"
        >
          <img :src="item.icon" width="20" height="20" alt="" />
          <span>{{ item.text }}</span>
          <img :src="item.iconRigth" width="9" height="15" alt="" />
        </div>
        <hr />
        <div
          v-for="(item, index1) in ItemData3"
          :key="'c' + index1"
          class="mineItem"
          @click="ItemData3Click(index1)"
        >
          <img :src="item.icon" width="20" height="20" alt="" />
          <span>{{ item.text }}</span>
          <img :src="item.iconRigth" width="9" height="15" alt="" />
        </div>
        <hr />
      </div>
    </van-pull-refresh>
    <div class="xian"></div>
    <tab-bar />
  </div>
</template>
<script>
import TabBar from "views/Tabbar";
import {
  queryUserInfoApi,
  queryIncomeInfoApi,
  queryHeaderImageInfoApi,
  queryNewsInfoApi,
} from "network/ApiServe";
export default {
  components: {
    TabBar,
  },
  created() {
    this.token = localStorage.getItem("token");
    this.userId = localStorage.getItem("userId");
    this.brandId = localStorage.getItem("brandId");
    this.phone = localStorage.getItem("phone");
  },
  data() {
    return {
      isLoading: false,
      ItemData1: [
        {
          icon: require("assets/image/mine_itme1.png"),
          text: "实名认证",
          iconRigth: require("assets/image/arr_rigth.png"),
        },
        {
          icon: require("assets/image/mine_itme2.png"),
          text: "我的钱包",
          iconRigth: require("assets/image/arr_rigth.png"),
        },
        // {
        //   icon: require("assets/image/mine_itme3.png"),
        //   text: "添加储蓄卡",
        //   iconRigth: require("assets/image/arr_rigth.png"),
        // },
        // {
        //   icon: require("assets/image/mine_itme4.png"),
        //   text: "添加信用卡",
        //   iconRigth: require("assets/image/arr_rigth.png"),
        // },
        {
          icon: require("assets/image/mine_itme5.png"),
          text: "银行卡",
          iconRigth: require("assets/image/arr_rigth.png"),
        },
      ],
      ItemData2: [
        {
          icon: require("assets/image/mine_itme6.png"),
          text: "交易明细",
          iconRigth: require("assets/image/arr_rigth.png"),
        },
        {
          icon: require("assets/image/mine_itme7.png"),
          text: "我的费率",
          iconRigth: require("assets/image/arr_rigth.png"),
        },
        {
          icon: require("assets/image/mine_itme8.png"),
          text: "我的社群",
          iconRigth: require("assets/image/arr_rigth.png"),
        },
        {
          icon: require("assets/image/mine_itme9.png"),
          text: "我的排行榜",
          iconRigth: require("assets/image/arr_rigth.png"),
        },
        {
          icon: require("assets/image/mine_itme10.png"),
          text: "收益模式",
          iconRigth: require("assets/image/arr_rigth.png"),
        },
      ],
      ItemData3: [
        {
          icon: require("assets/image/mine_itme11.png"),
          text: "帮助中心",
          iconRigth: require("assets/image/arr_rigth.png"),
        },
        {
          icon: require("assets/image/mine_itme12.png"),
          text: "修改密码",
          iconRigth: require("assets/image/arr_rigth.png"),
        },
        {
          icon: require("assets/image/mine_itme13.png"),
          text: "设置",
          iconRigth: require("assets/image/arr_rigth.png"),
        },
      ],
      userInfo: {},
      incomeInfo: {},
      yuan1: "元",
      yuan2: "元",
      yuan3: "元",
      img: "https://img.yzcdn.cn/vant/cat.jpeg",
      itemList: [],
    };
  },
  mounted() {
    this.getUserInfo();
    this.getIncomeIn();
    this.getHeaderImage();
    this.getNewsInfo();
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;

        this.getUserInfo();
        this.getIncomeIn();
        this.getHeaderImage();
        this.getNewsInfo();
      }, 1000);
    },
    navbarRight() {
      console.log(
        this.$store.state.user.token + "this.$store.state.user.token"
      );
    },
    getProfit() {
      this.$router.push("/profit");
    },
    getUserinfo() {
      this.$router.push("/userinfo");
    },
    // 用户信息
    getUserInfo() {
      queryUserInfoApi(this.token)
        .then((res) => {
          if (res.resp_code != "000000") {
            this.$toast(res.resp_message);
            return;
          }
          this.userInfo = res.result;
          console.log("this.userInfo:", this.userInfo);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //实名状态
    getRealnameStatus(index) {
      let userShopStatus = "";
      switch (index) {
        case "0":
          userShopStatus = "审核中";
          break;
        case "1":
          userShopStatus = "审核通过";
          break;
        case "2":
          userShopStatus = "审核失败";
          break;
        case "3":
          userShopStatus = "未审核";
          break;
      }
      return userShopStatus;
    },
    // 查询总收益接口
    getIncomeIn() {
      queryIncomeInfoApi(this.userId)
        .then((res) => {
          if (res.resp_code != "000000") {
            this.$toast(res.resp_message);
            return;
          }
          this.incomeInfo = res.result;
        })
        .catch((err) => {
          console.log("getIncomeIn:", err);
        });
    },
    getHeaderImage() {
      queryHeaderImageInfoApi(this.phone, this.brandId)
        .then((res) => {
          console.log("getHeaderImage:", res);
          // 成功
          if (res.resp_code === "000000") {
            if (res.result.result != null) {
              this.img = res.result.result;
            }
          }
        })
        .catch((err) => {
          console.log("getHeaderImage:", err);
        });
    },
    getItemData1Click(index) {
      switch (index) {
        case 0:
          if (
            this.getRealnameStatus(this.userInfo.realnameStatus) === "审核通过"
          ) {
            this.$toast("你已经实名通过");
          } else {
            this.$router.push("/choicerealname");
          }

          break;
        case 1:
          if (
            this.getRealnameStatus(this.userInfo.realnameStatus) === "审核通过"
          ) {
            this.$router.push("/wallet");
          } else {
            this.$dialog
              .confirm({
                title: "实名认证",
                message: "您还未通过,请先实名认证",
              })
              .then(() => {
                this.$router.push("/choicerealname");
              })
              .catch(() => {});
          }

          break;
        case 2:
          if (
            this.getRealnameStatus(this.userInfo.realnameStatus) === "审核通过"
          ) {
            this.$router.push("/bankcard");
          } else {
            this.$router.push("/choicerealname");
          }

          break;
      }
    },
    getMoney() {
      if (this.getRealnameStatus(this.userInfo.realnameStatus) === "审核通过") {
        this.$router.push("/wallet");
      } else {
        this.$dialog
          .confirm({
            title: "实名认证",
            message: "您还未通过,请先实名认证",
          })
          .then(() => {
            this.$router.push("/choicerealname");
          })
          .catch(() => {});
      }
    },
    getItemData2Click(index) {
      console.log("ItemData2", index);
      switch (index) {
        case 0:
          this.$router.push("/returningaservant");
          break;
        case 1:
          this.$router.push("/myrate");
          break;
        case 2:
          this.$router.push("/myspread");
          break;
        case 3:
          this.$router.push("/incomeranking");
          break;
        case 4:
          this.itemList.filter((item) => {
            if (item.title == "收益模式") {
              this.$router.push({
                name: "OpenWeb",
                params: {
                  title: item.title,
                  url: item.content,
                },
              });
            } else {
              this.$toast("正在玩命开发中...");
            }
          });
          break;
      }
    },
    ItemData3Click(index) {
      switch (index) {
        case 0:
          this.itemList.filter((item) => {
            if (item.title == "帮助中心") {
              this.$router.push({
                name: "OpenWeb",
                params: {
                  title: item.title,
                  url: item.content,
                },
              });
            } else {
              this.$toast("请联系管理人员");
            }
          });
          break;
        case 1:
          this.$router.push("/changepassword");
          break;
        case 2:
          this.$router.push("/setup");
          break;
      }
    },
    getNewsInfo() {
      queryNewsInfoApi(this.brandId, "功能跳转", 0)
        .then((res) => {
          console.log(res);
          if ((res.resp_code = "000000")) {
            this.itemList = res.result.content;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  computed: {
    getPhone() {
      return this.userInfo.phone;
      // .substring(0, 3) +
      // "****" +
      // this.userInfo.phone.substring(7)
    },
    //wde
    moeny() {
      let m = parseFloat(this.incomeInfo.allRebate);
      if (m > 10000) {
        this.yuan1 = "万元";
        m = (m / 10000).toFixed(2);
      }
      return m;
    },
    todayMoeny() {
      let m1 = parseFloat(this.incomeInfo.todayRebate);
      if (m1 > 10000) {
        this.yuan2 = "万元";
        m1 = (m1 / 10000).toFixed(2);
      }
      return m1;
    },
    yesterdayMoeny() {
      let m2 = parseFloat(this.incomeInfo.yesterdayRebate);
      if (m2 > 10000) {
        this.yuan3 = "万元";
        m2 = (m2 / 10000).toFixed(2);
      }
      return m2;
    },
  },
};
</script>
<style scoped>
.mine {
  background-color: #fff;
}
.mine-main {
  margin-top: 46px;
  margin-bottom: 50px;
}
.mine-name {
  font-size: 19px;
  color: #121212;
  display: block;
}
.mine-top {
  display: flex;
  justify-content: space-between;

  align-items: center;
}
.van-image {
  margin-right: 12px;
}
.mine-grade {
  display: block;
  margin-left: 8px;
  background-color: #121212;
  color: #f1ce8a;
  border-radius: 4px;
  font-size: 10px;
  padding: 3px 6px;
  height: 18px;
  line-height: 15px;

  height: 18px;
  line-height: 15px;
}
.nameGrade {
  display: flex;
}
.tvPhone {
  margin-left: 5px;
  font-size: 13px;
}
.mine-item1 {
  padding: 10px 0 15px;
}

.mime-img {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin: 10px 24px;
  justify-content: space-between;
}
.mine-money {
  margin-left: 15px;
  margin-right: 15px;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.mine-tvcenter {
  text-align: center;
  font-size: 13px;
}
.mine-tvmoeny {
  font-size: 10px;
  margin-bottom: 5px;
}
.xian {
  width: 1px;
  height: 40px;
  background-color: #efefef;
}
.mine-tvmoeny span {
  font-size: 18px;
}
hr {
  height: 20px;
  border: 0px;
  outline: 0px;
  background-color: #efefef;
}
.mineItem {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 55px;
  line-height: 55px;
  padding-left: 16px;
  padding-right: 16px;
  border-bottom: 1px solid #efefef;
  vertical-align: middle;
}
.mineItem span {
  flex: 1;
  margin-left: 10px;
  font-size: 16px;
}
.xian {
  height: 50px;
  background-color: #efefef;
}
</style>